<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            box-sizing: border-box;

            width:400px;
            height:400px;
            margin:200px auto;
            background-color: #ff8500;

            /*给父元素设置视距（透视）*/
            perspective: 400px;
        }
        .child{

            width:100px;
            height:100px;
            background-color: darkblue;
            margin:0 auto;
            /*transform:translateX(200px);*/
            /*transform:translateY(200px);*/

           /* transform:translateZ(200px);*/
            transform:translate3d(100px,100px,100px);
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>